<template>
  <div class="ff">
    <div>
      <van-nav-bar right-text="删除" @click-right="onClickRight" />
    </div>
    <div class="ww">
      <van-swipe-cell v-for="item in goos" :key="item.id">
        <van-card
          :num="cont"
          :price="item.show_price"
          :desc="item.description"
          :title="item.goods_name"
          :thumb="item.goods_img"
        >
          <template #footer>
            <van-button size="mini" @click="cont++">+</van-button>
            <van-button size="mini" @click="cont--">-</van-button>
          </template>
        </van-card>

        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="ccc" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="ddd">
      <div class="dd">
        <div>合计:{{ cont * show_price }}￥</div>
        <div>
          <van-button size="small" to="/jiesuan" type="danger">结算</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Toast } from "vant";
import { onMounted, reactive, ref } from "vue";
import httpApi from "@/http";
import Cart from "@/types/Cart";
const num = ref(0);
const onClickRight = () => Toast();
// 组件挂载完毕后执行
// 查询购物车
const shopcarts = reactive<Cart[]>([]);
onMounted(() => {
  let params = { user_id: 1 };
  httpApi.cartApi.queryAll(params).then((res) => {
    console.log(res);
    let shopcart: Cart[] = res.data.data;
    shopcarts.push(...shopcart);
  });
});
// 用购物车的id 查询对应商品
const goos = reactive<Cart[]>([]);
const show_price = ref([]);
const cont = ref(1);
const sss=()=>{
  let params = { goods_id: 1 };
  httpApi.cartApi.querySall(params).then((res) => {
    console.log(res);
    let goods: Cart[] = res.data.data;
    goos.push(...goods);
    show_price.value.splice(
      0,
      1,
      JSON.parse(JSON.stringify(goos))[0].show_price
    );
    // console.log('123', goos)
    // console.log('123', JSON.stringify(goos))
    // console.log('123', JSON.parse(JSON.stringify(goos))[0])
    // console.log('123', JSON.parse(JSON.stringify(goos))[0].show_price)
  });
}
onMounted(() => {
  sss()
});

const ccc=()=>{
  let params ={cart_id:11}
  httpApi.cartApi.deleteqq(params).then(res=>{
    console.log(res);
 if(res.status==200){
  sss()
 }
  })
}
</script>

<style scoped lang="scss">

.ff {
  height: 100%;
}
.ddd {
  width: 100%;
  position: fixed;
  bottom: 50px;
}
.dd {
  display: flex;
  justify-content: space-between;
  color: red;
  border-top: 0.5px solid #666;
  height: 30px;
}
.ww {
  padding-top: 15px;
}
.goods-card {
  margin: 0;
  background-color: whitesmoke;
}

.delete-button {
  height: 100%;
}
.van-nav-bar {
  background-color: coral;
}
.van-nav-bar__text {
  color: #ffffff;
}
</style>
